<%@ page language="java" contentType="text/html;charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<script src="<c:url value='/js/jquery.form.js'/>"></script>

<script type="text/javascript">

function jumpTo(url) {
    $.ajax({
        type : "GET",
        async : false, //同步请求  
        url : url,
        timeout : 1000,
        success : function(projects) {
            $("#working-area").html(projects);//要刷新的div  
        },
        error : function() {
            alert("ERROR!");
        }
    });
}
</script>
<div>
    <div class="">
            <ul class="breadcrumb">
                <li>
                    <h3 style="margin-top: auto">
                        <c:out value="${project.name}"></c:out>
                        <span class="divider">/</span>
                    </h3>
                </li>
                <li><h3>显控设计模式 <span class="divider">/</span></h3></li>
                <li class="active"><h3><a href="#">控制响应</a> <span class="divider">/</span></h3></li>
            </ul>
    </div>
    <hr  />
    
	<!-- div class="tabbable">
		< div class="tabbable" style="margin-bottom: 18px;">
			<ul class="nav nav-tabs">
			    <li class=""><a href="" data-toggle="pill"><h3>实体数据区</h3></a></li>
				<li class=""><a href="" data-toggle="pill"><h3>总线通信</h3></a></li>
				<li class=""><a href="" data-toggle="pill"><h3>IO通信</h3></a></li>
				<li class=""><a href="" data-toggle="pill"><h3>信息显示</h3></a></li>
				<li class="active"><a href="" data-toggle="pill"><h3>控制响应</h3></a></li>

			</ul>
			<div class="tab-content"
				style="padding-bottom: 9px; border-bottom: 1px solid #ddd;">
				<div class="tab-pane" id="tab6"></div>
				<div class="tab-pane" id="tab1"></div>
				<div class="tab-pane" id="tab2"></div>
				<div class="tab-pane" id="tab3"></div -->
		    <div>
				<div class="tab-pane active form-horizontal" id="tab4">
					<!-- div class="span9" align="right">
						<a class="btn "
							href="/ManEnv/project/${project.id}/design_pattern_component/DISPLAY">
							<i class="icon-arrow-left"></i>上一步
						</a>
						<a class="btn "
							href="<%=request.getContextPath()%>/project/list?projectId=${project.id}">完成</a>
					</div -->
					<div class="control-group span7">
						<label class="control-label" for="">设计模式实例名称</label>
						<div class="controls">
							<span class="uneditable-input input-large"><c:out
									value="${dpiName}"></c:out></span>
						</div>
					</div>
					<div class="form-horizonal" >
						<div class="control-group ">
							<input type="hidden" name="dpiName" value="${dpiName}"></input> <input
								type="hidden" name="dpcUri" value="${dpcUri}"></input>
							<div class="control-group span7">
								<label class="control-label" for="busType">键码定义</label>
								<div class="controls">
									<div class="btn-group">
										<button class="btn "
											data-target="#add_key_code_panel" data-toggle="modal"data-backdrop="false"><i class="icon-plus"></i> 增加</button>
									</div>
									<div class="btn-group">
                                        <button class="btn" id="hide-button-btn" onclick="hideButtons()"><i class="icon-chevron-left"></i> 隐藏</button>
                                    </div>
                                    <div class="btn-group">
                                        <button class="btn" id="show-button-btn" onclick="showButtons()"><i class="icon-chevron-down"></i> 显示</button>
                                    </div>
                                    <div id="button-list-div" >
									<input type="hidden" name="keyCodes" value="" />
									<table class="table table-bordered table-striped table-hover"
										id="key_codes_table">
										<thead>
											<tr>
												<th>#</th>
												<th>按键</th>
												<th>键码值</th>
												<th>操作</th>
											</tr>
										</thead>
										<tbody>
											<c:forEach items="${buttons}" var="button" varStatus="status">
												<tr class="">
													<td>${status.count}</td>
													<td>${button.name}</td>
													<td>${button.code}</td>
													<td><input type="hidden" value="${button.id}"></input>
														<button class="btn" onclick="showButtonDeletePanel('${button.id}',this)"><i class="icon-remove"></i> 删除</button>
													</td>
												</tr>
											</c:forEach>
										</tbody>
									</table>
									</div>
								</div>
							</div>
							<!-- div class="control-group span7">
								<label class="control-label" for="rollFrequency">轮询频率</label>
								<div class="controls">
									<input type="text" name="rollFrequency" /> Hz
								</div>
							</div -->
							<div class="control-group span8">
								<label class="control-label" for="sharedMemory">控制响应表</label>
								<div id="sharedMemory" class="controls">
									<div class="btn-group">
										<button class="btn "
											data-target="#add_control_response_panel" data-toggle="modal"data-backdrop="false"><i class="icon-plus"></i> 增加</button>
									</div>
									<div class="btn-group">
                                        <button class="btn" id="hide-control-response-btn" onclick="hideControlResponses()"><i class="icon-chevron-left"></i> 隐藏</button>
                                    </div>
                                    <div class="btn-group">
                                        <button class="btn" id="show-control-response-btn" onclick="showControlResponses()"><i class="icon-chevron-down"></i> 显示</button>
                                    </div>
                                    <div id="control-response-list-div" >
									<input type="hidden" name="controlResponses" value="" />
									<table class="table table-bordered table-striped table-hover"
										id="control_responses_table">
										<thead>
											<tr>
												<th>#</th>
												<th>页面</th>
												<th>按键</th>
												<th>控制响应函数</th>
												<th>操作</th>
											</tr>
										</thead>
										<tbody>
										    <c:set var="index" value="0" />  
											<c:forEach items="${controlMappings}" var="mappings"
												varStatus="status">
												<c:if test="${mappings.get('type').getValue() == 'function'}">
													<tr>
														<td>${index+1} <c:set var="index" value="${index+1}" />  </td>
														<td>${mappings.get("page").getValue()}</td>
														<td>${mappings.get("button").getValue()}</td>
														<td>${mappings.get("control_function").getValue()}</td>
														<td><input type="hidden"
															value="${mappings.get('id').getValue()}"></input>
															<button class="btn" onclick="showControlMappingDeletePanel('${mappings.get('id').getValue()}', this)"><i class="icon-remove"></i> 删除</button></td>
													</tr>
												</c:if>
											</c:forEach>
										</tbody>
									</table>
									</div>
								</div>
							</div>

							<div class="control-group span8">
								<label class="control-label" for="sharedMemory">页面跳转</label>
								<div id="sharedMemory" class="controls">
									<div class="btn-group">
										<button class="btn "
											data-target="#add_page_jump_panel"
											data-toggle="modal"data-backdrop="false"><i class="icon-plus"></i> 增加</button>
									</div>
									<div class="btn-group">
                                        <button class="btn" id="hide-jump-btn" onclick="hideJumps()"><i class="icon-chevron-left"></i> 隐藏</button>
                                    </div>
                                    <div class="btn-group">
                                        <button class="btn" id="show-jump-btn" onclick="showJumps()"><i class="icon-chevron-down"></i> 显示</button>
                                    </div>
                                    <div id="jump-list-div" >
									<input type="hidden" name="controlResponses" value="" />
									<table class="table table-bordered table-striped table-hover"
										id="control_responses_table">
										<thead>
											<tr>
												<th>#</th>
												<th>起始页面</th>
												<th>按键</th>
												<th>跳转页面</th>
												<th>操作</th>
											</tr>
										</thead>
										<tbody>
											<c:forEach items="${controlMappings}" var="mappings"
												varStatus="status">
												<c:if test="${mappings.get('type').getValue() =='jump'}">
													<tr>
														<td>${status.count}</td>
														<td>${mappings.get("page").getValue()}</td>
														<td>${mappings.get("button").getValue()}</td>
														<td>${mappings.get("target_page").getValue()}</td>
														<td><input type="hidden"
															value="${mappings.get('id').getValue()}"></input>
															<button class="btn" onclick="showPageJumpDeletePanel('${mappings.get('id').getValue()}', this)"><i class="icon-remove"></i> 删除</button></td>
													</tr>
												</c:if>
											</c:forEach>
										</tbody>
									</table>
                                    </div>
								</div>
							</div>
						</div>
					</div> <!-- form end -->
				</div>


			<!-- /div>
		</div -->
		<!-- /tabbable -->
	</div>
</div>

<div class="modal hide fade" id="add_key_code_panel">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal"
			aria-hidden="true">&times;</button>
		<h3>添加按钮</h3>
	</div>
	<form
		action="/ManEnv/controlDesignPattern/project/addButton"  id="add-button-form"
		method="post">
		<input type="hidden" name="dpcUri" value="${dpcUri}"></input> <input
			type="hidden" name="projectId" value="${project.id}"></input>
		<div class="modal-body">
			<div class="control-group">
				<label class="control-label" for="name">按键</label>
				<div class="controls">
					<input type="text" name="name" placeholder="按键名称">
				</div>
			</div>
			<div class="control-group">
				<label class="control-label" for="code">键码值</label>
				<div class="controls">
					<input type="text" name="code" placeholder="0x0000">
				</div>
			</div>
		</div>
		<div class="modal-footer">
			<button type="submit" class="btn "><i class="icon-ok"></i> 保存</button>
			<button type="reset" class="btn" onClick="closeDialog($('#add_key_code_panel'))">
			     <i class="icon-remove"></i> 取消
			</button>
		</div>
	</form>
</div>

<div class="modal hide fade" id="add_control_response_panel">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal"
			aria-hidden="true">&times;</button>
		<h3>添加控制响应</h3>
	</div>
	<form
		action="/ManEnv/controlDesignPattern/project/function/add"
		method="post" id="add-control-response-form">
		<input type="hidden" name="dpcUri" value="${dpcUri}"></input> <input
			type="hidden" name="projectId" value="${project.id}"></input>
		<div class="modal-body form-horizontal">
			<div class="control-group">
				<label class="control-label" for="pages">页面</label>
				<div class="controls">
					<select name="page">
						<c:forEach items="${exist_pages}" var="page">
							<option value="${page.get('page_name').getValue()}">
								<c:out value="${page.get('page_name').getValue()}"></c:out>
							</option>
						</c:forEach>
					</select>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label" for="buttons2">按键</label>
				<div class="controls">
					<select name="buttonId">
						<c:forEach items="${buttons}" var="button">
							<option value="${button.id}">
								<c:out value="${button.name}"></c:out>
							</option>
						</c:forEach>
					</select>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label" for="control_response_functions">控制响应函数</label>
				<div class="controls">
					<!-- <select name="functionId">
					<c:forEach items="${control_response_functions}" var="function">
						<option value="${function.id}">
							<c:out value="${function.methodSigniture}"></c:out>
						</option>
					</c:forEach>
				</select>  -->
					<select name="functionId">
						<c:forEach items="${otherMethodComponentLinks}" var="link">
							<option value="${link.method.id}=${link.component.uri}">
								<c:out
									value="${link.method.methodSigniture} -- ${link.component.name}"></c:out>
							</option>
						</c:forEach>
					</select>
				</div>
			</div>
		</div>
		<div class="modal-footer">
			<button class="btn " id="add_control_response_btn"><i class="icon-ok"></i> 保存</button>
			<button class="btn" data-dismiss="modal" aria-hidden="true"><i class="icon-remove"></i> 关闭</button>
		</div>
	</form>
</div>

<div class="modal hide fade" id="add_page_jump_panel">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal"
			aria-hidden="true">&times;</button>
		<h3>添加页面跳转</h3>
	</div>
	<form action="/ManEnv/controlDesignPattern/project/jump/add" method="post" id="add-page-jump-form">
		<input type="hidden" name="dpcUri" value="${dpcUri}"></input> <input
			type="hidden" name="projectId" value="${project.id}"></input>
		<div class="modal-body form-horizontal">
			<div class="control-group">
				<label class="control-label" for="pages">起始页面</label>
				<div class="controls">
					<select name="page">
						<c:forEach items="${exist_pages}" var="page">
							<option value="${page.get('page_name').getValue()}">
								<c:out value="${page.get('page_name').getValue()}"></c:out>
							</option>
						</c:forEach>
					</select>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label" for="buttons2">按键</label>
				<div class="controls">
					<select name="buttonId">
						<c:forEach items="${buttons}" var="button">
							<option value="${button.id}">
								<c:out value="${button.name}"></c:out>
							</option>
						</c:forEach>
					</select>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label" for="pages">目标页面</label>
				<div class="controls">
					<select name="targetPage">
						<c:forEach items="${exist_pages}" var="page">
							<option value="${page.get('page_name').getValue()}">
								<c:out value="${page.get('page_name').getValue()}"></c:out>
							</option>
						</c:forEach>
					</select>
				</div>
			</div>
		</div>
		<div class="modal-footer">
			<button class="btn " id="add_control_response_btn"><i class="icon-ok"></i> 保存</button>
			<button class="btn" data-dismiss="modal" aria-hidden="true" "><i class="icon-remove"></i> 关闭</button>
		</div>
	</form>
</div>

<div class="modal hide fade" id="delete-button-panel">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>删除键码定义</h3>
    </div>
    <div class="modal-body">
        <p>确定要删除键码定义?</p>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" id="delete-button-btn">
            <i class="icon-ok"></i>&nbsp;确定
        </button>
        <button class="btn" data-dismiss="modal">
            <i class="icon-remove"></i>&nbsp;取消
        </button>
    </div>
</div>

<div class="modal hide fade" id="delete-control-mapping-panel">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>删除控制响应</h3>
    </div>
    <div class="modal-body">
        <p>确定要删除控制响应?</p>
    </div>
    <div class="modal-footer">
        <!-- button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button-->
        <button class="btn" data-dismiss="modal" id="delete-control-mapping-btn">
            <i class="icon-ok"></i>&nbsp;确定
        </button>
        <button class="btn" data-dismiss="modal">
            <i class="icon-remove"></i>&nbsp;取消
        </button>
    </div>
</div>

<div class="modal hide fade" id="delete-page-jump-panel">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>删除页面跳转</h3>
    </div>
    <div class="modal-body">
        <p>确定要删除页面跳转?</p>
    </div>
    <div class="modal-footer">
        <!-- button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button-->
        <button class="btn" data-dismiss="modal" id="delete-page-jump-btn">
            <i class="icon-ok"></i>&nbsp;确定
        </button>
        <button class="btn" data-dismiss="modal">
            <i class="icon-remove"></i>&nbsp;取消
        </button>
    </div>
</div>


<!-- Le javascript
    ================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="<c:url value='/js/editControlDesignPatternComponent.js'/>"></script>

